<template>
	<view>
       <myheader></myheader>
		<view class="form re">
			<view class="name">
				<input placeholder="姓名" name="name" v-model="username" placeholder-style="color: rgba(235,104,119,1);"/>
			</view>
			<text class="tips">请填写真实姓名，仅支持使用中文汉字输入</text>
			
			<view class="sex" >
				性别：
				<radio-group @change="radioChange">
					<label class="radio red"><radio name="sex" value="1" checked="true" />男</label>
					<label class="radio red"><radio name="sex" value="0" />女</label>
				</radio-group>
			</view>
			
			<view class="username">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="inputDialogToggle()">{{getCodeText}}</view>
				<input placeholder="请输入手机号" v-model="phoneNumber" placeholder-style="color: rgba(235,104,119,1);"/>
			</view>
			<view class="error_tips" v-if="error_phone_tips!=''">{{error_phone_tips}}</view>
			<view class="code">
				<input placeholder="请输入验证码" maxlength = "6" v-model="code" placeholder-style="color: rgba(235,104,119,1);"/>
			</view>
			
			<view class="btn" @tap="doReg">立即注册 </view>
			<view class="res">
				<view @tap="toLogin">已有账号立即登录</view>
			</view>
		</view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" class="popup">
			<view class="model-wraper center" style="background-color: #fff;">
				<view class="modal-title">请输入验证码</view>
				<view class="modal-body">
					<input class="validcode" v-model="validcode" placeholder="请输入验证码" />
					<img class="validimg" mode="widthFix" @click="refreshValidimg()" :src="validimg_src"></image>
				</view>
				<view>
					<view class="btn cancel"  @click="handleCancel">取消</view>
					<view class="btn confirm"  @click="handleConfirm">确认</view>
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	export default {
		data() {
			return {
				phoneNumber:"",
				code:'',
				username:'',
				passwd:"",
				sex:"1",
				getCodeText:'获取验证码',
				getCodeBtnColor:"rgba(235,104,119,1)",
				getCodeisWaiting:false,
				error_phone_tips:'',
				error_code_tips:'',
				validimg_src:'https://bg.jswbgz.com/vcode',
				validcode:'',
				randomVersion:0,
				isDisabled:true
			}
		},
		onLoad() {
                this.randomVersion = this.generateRandomVersion();
				this.validimg_src='https://bg.jswbgz.com/check_code?v='+this.randomVersion;
		},
		methods: {
			Timer(){},
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeisWaiting){
					return ;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					this.isDisabled = true
					return false;
				}
				if (this.validcode == "") {
					uni.showToast({
						title: '请输入图片验证码',
						icon: "none"
					});
					this.isDisabled = true
					return false;
				
				}
				
				//示例用定时器模拟请求效果
				uni.request({
				url: "https://bg.jswbgz.com/post/user:send_reg_sms", //仅为示例，并非真实接口地址。
				data: {
				phone: this.phoneNumber,
				check_code:this.validcode,
				v:this.randomVersion
				},
				header: {
				    'Content-Type': 'application/x-www-form-urlencoded'
				},
				dataType:'json',
				method: 'post',
				success: (res) => {
					this.isDisabled = true
					if(res.data.success){
						this.$refs.inputDialog.close()
						this.getCodeText = "发送中..."
						this.getCodeisWaiting = true;
						this.getCodeBtnColor = "rgba(235,104,119,0.5)"
						uni.showToast({title:'验证码，发送成功',icon:"none",duration: 5000});
					     this.setTimer();
					}
					else{
						
						if(res.data.msg!='验证码不正确！')
						{
							this.setTimer();
							this.getCodeText = "发送中..."
							this.getCodeisWaiting = true;
							this.getCodeBtnColor = "rgba(235,104,119,0.5)"
						}
						else{
							
							this.$refs.inputDialog.close()
						}
						this.error_phone_tips = res.data.msg;
						uni.showToast({title:res.data.msg,icon:"none",duration: 5000});
					}
					
					
					console.log(res)
				},
				fail: (res) => {
				console.log(res)
				}
				});
			},
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "rgba(235,104,119,1)";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
					
				},1000)
			},
			doReg(){
				uni.hideKeyboard()
				//模板示例部分验证规则
				if(this.username==''){
					uni.showToast({title: '请填写姓名',icon:"none",duration: 5000});
					return false; 
				}
				else if(!(/^[\u4E00-\u9FA5]{2,12}$/.test(this.username))){
					uni.showToast({title: '输入有误,请输入最多12个中文汉字',icon:"none",duration: 5000});
					return false; 
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none",duration: 5000});
					return false; 
				} 
				console.log(this.username+'_'+this.sex)
				//示例验证码，实际使用中应为请求服务器比对验证码是否正确。
				if(this.sex==''){
					uni.showToast({title: '请选择性别',icon:"none",duration: 5000});
					return false; 
				}
				if(this.code==''){
					uni.showToast({title: '请输入验证码',icon:"none",duration: 5000});
					return false; 
				}
				uni.showLoading({
					title: '提交中...'
				})
				var obj={
					phone:this.phoneNumber,
					sms_code:this.code,
					user_name:this.username,
					sex:this.sex
					}
				obj=JSON.stringify(obj);
				console.log(obj)
				
				//注册提交
				uni.request({
				url: "https://bg.jswbgz.com/post/user:reg", //仅为示例，并非真实接口地址。
				data:{
					o:obj
				},
				header: {
				    'Content-Type': 'application/x-www-form-urlencoded'
				},
				method: 'post',
				success: (res) => {
					uni.hideLoading()
				if(res.data.success){
					uni.showToast({
						title: '注册成功',
						icon: "none",
						duration: 5000
					});
					console.log(res.data)
					uni.setStorage({
						key: 'UserList_h5',
						data: res.data.data,
						success: function() {
							uni.setStorageSync('login_time_h5', Date.now());
							uni.setStorageSync('token_h5', res.data.data.token);
							
							uni.navigateTo({
									url: '../Index/index'
							});
						}
					});
					//this.toLogin()
				}
				else{
					console.log(res.data)
					uni.showToast({title: res.data.msg,icon:"none",duration: 5000});
				}
				},
				fail: (res) => {
						uni.showToast({title: "注册失败",icon:"none",duration: 5000});
					console.log('set error:'+JSON.stringify(e));
				}
				});
			},
			toLogin(){ 
				uni.hideKeyboard()
				uni.redirectTo({url: 'login'});
				uni.navigateBack();
			},
			  radioChange: function(evt) {
				  this.sex=evt.detail.value
				  console.log(evt.detail.value)
			            
			},
			inputDialogToggle() {
				if (this.getCodeisWaiting) {
					return;
				}
				this.error_phone_tips = "";
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
						this.error_phone_tips = "请填写正确手机号码";
					return false;
				}
				this.refreshValidimg();
				this.$refs.inputDialog.open()
			},
			handleCancel() {
				this.isDisabled = true
				this.$refs.inputDialog.close()
			},
			handleConfirm(val) {
				if (!this.isDisabled) {
					uni.showToast({
						title: '请勿重复点击',
						icon: "none"
					});
					//this.$refs.inputDialog.close()
					return;
				}
				this.isDisabled = false
				this.getCode();
				//this.$refs.inputDialog.close()
			},
			refreshValidimg(){
				this.validimg_src='';
				this.randomVersion = this.generateRandomVersion();
				this.validimg_src='https://bg.jswbgz.com/check_code?v='+this.randomVersion;
			},
			generateRandomVersion(){
			 const major = Math.floor(Math.random() * 10);
			 const minor = Math.floor(Math.random() * 10);
			 const patch = Math.floor(Math.random() * 10);
			 const patch2 = Math.floor(Math.random() * 10);
			 const patch3 = Math.floor(Math.random() * 10);
			 const patch4 = Math.floor(Math.random() * 10);
			 const patch5 = Math.floor(Math.random() * 10);
			 const patch6 = Math.floor(Math.random() * 10);
			 const patch7 = Math.floor(Math.random() * 10);
			 const patch8 = Math.floor(Math.random() * 10);
			 const patch9 = Math.floor(Math.random() * 10);
			 const patch10 = Math.floor(Math.random() * 10);
			 const patch11 = Math.floor(Math.random() * 10);
			 return `${major}.${minor}${patch}${patch2}${patch3}${patch4}${patch5}${patch6}${patch7}${patch8}${patch9}${patch10}${patch11}`;
			}
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/login.scss";
	.tips{
		    padding:  0px 15px;
		    display: block;
		    color: rgba(235,104,119,1);
		    font-size: 14px;
			margin-bottom: 13px ;
	}
	.name{
		margin-bottom: 5px !important;
	}

	  /* radio 选中后的样式 */
	
/deep/uni-radio .uni-radio-input.uni-radio-input-checked{
		background-color: rgba(235,104,119,1)!important;
		border-color:rgba(235,104,119,1)!important;
		background-clip: content-box!important;
		padding: 6rpx!important;
		box-sizing: border-box;
	}
	
	/* radio 选中后的图标样式*/
	
/deep/uni-radio .uni-radio-input.uni-radio-input-checked::before{
		display: none!important;
	}
	.popup{
		.model-wraper {
			width: 600rpx;
			background-color: #fff;
			border-radius: 16rpx;
			position: absolute;
			z-index: 1000;
			top: 50%;
			left: 50%;
			margin-top: -300rpx;
			margin-left: -300rpx;
			box-shadow: #dcdcdc 0px 0px 10rpx;
		}
		
		.modal-title {
			height: 90rpx;
			line-height: 90rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			color: #666;
		}
		
		.modal-body {
			/* padding: 30rpx 30rpx 80rpx 30rpx; */
			margin:10rpx 30rpx;
		}
		
		.btn {
			width: 300rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
			float: left;
			border-top: 1rpx solid #ddd;
		}
		
		.btn.cancel {
			width: 299rpx;
			border-right: 1rpx solid #dcdcdc;
		}
		.validcode{
			padding: 5rpx;
			height: 80rpx;
			width: 50%;
			display: inline-block;
			border-radius: 5px;
			border: 1px solid #b1b1b1;
			padding-left: 10px;
		}
		.validimg{
			padding: 10rpx;
			width: 40%;
			display: inline-block;
		}
	}

</style>
